<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- <script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script> -->
    <script src="./echarts.min.js"></script>
    <style>
      #vchart-demo {
        width: 500px;
        height: 320px;
      }
    </style>
  </head>
  <body>
    <div id="vchart-demo"></div>

    <div>
      <button onclick="updateOption('bar')">bar</button>
      <button onclick="updateOption('line')">line</button>
      <button onclick="updateOption('smooth-line')">smooth-line</button>
      <button onclick="updateOption('pie')">pie</button>
      <button onclick="updateOption('area')">area</button>
    </div>
    <script>
      //       const spec = {
      //         data: [
      //           {
      //             id: "barData",
      //             values: [
      //               { month: "Monday", sales: 22 },
      //               { month: "Tuesday", sales: 13 },
      //               { month: "Wednesday", sales: 25 },
      //               { month: "Thursday", sales: 29 },
      //               { month: "Friday", sales: 38 },
      //             ],
      //           },
      //         ],
      //         type: "bar",
      //         xField: "month",
      //         yField: "sales",
      //       };

      //       const vchart = new VChart.default(spec, { dom: "vchart-demo" });
      //       vchart.renderSync();
      //       console.log("==> ", vchart);
      // console.log("==> ",vchart.getSpec());

      // 指定图表的配置项和数据
      const myChart = echarts.init(document.getElementById("vchart-demo"));
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      function updateOption(type) {
        const 
        switch (type) {
          case "bar":
            option.series[0].type = "bar";
            myChart.setOption(option);
            break;
          case "line":
            option.series[0].type = "line";
            myChart.setOption(option);
            break;
          case "smooth-line":
          option.series[0].type = "line";
          option.series[0].smooth = true;
          myChart.setOption(option);

            break;
          case "pie":
            spec.type = "pie";
            break;
          case "area":
            spec.type = "area";
            break;
          default:
        }
      }
    </script>
  </body>
</html>
